<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row>
			<lay-col :md="24">
				<lay-card>
					<lay-form style="margin: 0px; padding: 0px;">
						<lay-space>
							<!-- <lay-form-item style="margin: 0px;">
								<lay-input style="width: 180px" size="sm" :allow-clear="true" placeholder="关键词"
									v-model="page.SearchaAtistop"></lay-input>
							</lay-form-item> -->

							<lay-form-item style="margin: 0px;">
								<lay-button size="sm" type="primary" @click="cls_List_ubmitx('on')">展开类别</lay-button>
							</lay-form-item>
							<lay-form-item style="margin: 0px;">
								<lay-button size="sm" type="primary" @click="cls_List_ubmitx('off')">收缩类别</lay-button>
							</lay-form-item>
						</lay-space>
					</lay-form>
				</lay-card>
			</lay-col>
			<lay-col :md="24">
				<lay-row space="4">
					<!-- 分类树 -->
					<div>
						<lay-tree :data="treeData" :onlyIconControl="true">
							<template #title="{ data }">
								<lay-dropdown trigger="contextMenu" updateAtScroll>
									<span @click="openRightDrawer(data)"> {{ data.title }} </span>
									<template #content>
										<lay-dropdown-menu>
											<lay-dropdown-menu-item @click="addWindow('new', data)">
												<template #prefix><lay-icon type="layui-icon-list"></lay-icon></template>
												<template #default>新增</template>
											</lay-dropdown-menu-item>
											<lay-dropdown-menu-item @click="addWindow('up', data)">
												<template #prefix><lay-icon type="layui-icon-set-sm"></lay-icon></template>
												<template #default>编辑</template>
											</lay-dropdown-menu-item>
										</lay-dropdown-menu>
									</template>
								</lay-dropdown>
							</template>
						</lay-tree>
					</div>
				</lay-row>
			</lay-col>
		</lay-row>
	</lay-container>
	<!-- 弹窗 -->
	<sonWindow ref="sonWindowRef" @topClick="topFn" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import MyModal from './MyModal.vue';
import { layer } from "@layui/layer-vue";
import sonWindow from "./module/indexWindow.vue";
import { GoodsClsList } from "../../../../../api/module/user"; //请求模块


// import PNDB from "./indexPN";
// const PN = new PNDB;
// const bbs = PN.AA('PN加载......' + window.location.href);
// const checkbox = ref(true);
// const defaultToolbar = ref(true);
// const page = reactive({ total: 100, limit: 10, current: 2 });
const page = ref({
	// total: 0,//总行数
	// limit: 10,//每页行数
	// current: 1,//页码
	// SearchField: 'us_name',//默认搜索字段
	// SearchOperator: 'LIKE',//默认搜索查询表达式
	SearchaAtistop: "",//默认搜索关键词
	// SearchaSort: 'DESC',//默认搜索排序方式ASE,DESC升降序
	// SearchaSortField: 'id',//默认排序字段
});
const treeData = ref([]);//分类树数据

//监听子组件
const topFn = function (db: any) {
	console.log("我的父组件中的方法", db);
	// ListSubmit()
	cls_List_ubmit()
};


// 数据集
// const dataSource = ref([]);

// const ListSubmit = async () => {
// 	let data = await userList(page.value);
// 	layer.load(0, { time: 1000 })
// 	if (data.code == 200) {
// 		// dataSource.value = data.data.data;//数据集
// 		// page.value.total = data.data.total;//数据总行数
// 	} else {
// 		layer.msg(data.msg, { icon: 2 });
// 	}
// };


const List_pread = ref({
	spread: "off",// 查询的树是否展开 off 为收缩，其它 为展开
});
// 分类树渲染
const cls_List_ubmit = async () => {
	treeData.value = [];
	let data = await GoodsClsList(List_pread.value);//远程获取树数据
	// console.log(data);
	layer.load(0, { time: 1000 })
	if (data.code == 200) {
		treeData.value = data.cateTree;//数据集
	} else {
		layer.msg(data.msg, { icon: 2 });
	}
};




function cls_List_ubmitx(db: string) {
	List_pread.value.spread = db;
	console.log(List_pread.value.spread);

	cls_List_ubmit();
}




const sonWindowRef = ref<InstanceType<typeof MyModal> | null>(null)
// 打开弹窗
const addWindow = function (op: string, data: any) {
	// console.log("点击:", data);
	const data_bs = {
		"id": data.id,
		"i": data.i,
		"level": data.level,
		"name": data.name,
		"pid": data.pid,
		"title": data.title
	};
	console.log("父窗口传送", op, data_bs);
	// op='up'//修改模式
	// op='new'//新增模式
	sonWindowRef.value?.childFun(op, data_bs, treeData.value);//子组件方法
};
// 左击弹层看明细
function openRightDrawer(txt: any) {
	// console.log(txt);
	layer.drawer({
		// time:3000,//关闭时间
		isHtmlFragment: true,//解析 html 字符
		title: "详情",// 标题
		content: '<div style="padding: 10px;">' +
			'<br/>父级编号:' + '[' + txt.pids + ']' +
			'<br/>子级编号:' + '[' + txt.ids + ']' +
			'<br/>类别编号:' + txt.id +
			'<br/>类别名称:' + txt.name +
			'<br/>排序权重:' + txt.i +
			'<br/>所在层级:' + txt.level +
			'<br/>提示:<br/>--[排序权重]的数值越大，类别排列越前。' +
			'<br/>--勾选[仅限最后一级建项目]，点击父类可查到下级所有子类项目，否则只能查当前类别项目。区别在于类别内项目数量统计及影响个人使用习惯，请根据业务要求和使用便利性选择。' +
			'<br/><br/>--名目注释:[22 - 国际组织(0-19-0)]=22-代表类别ID；国际组织-代表类别名；0-代表层级（第1级分类）；19-代表有19个子类目录；0-代表当前是否末端节点_0否1是；' +
			'</div>',//内容
		offset: "r"//弹出位置
	});
}


onMounted(() => {
	cls_List_ubmit();
	// console.log(bbs);
})
</script>
